<template>
  <div class="content_main">
    <div class="main_box">

      <div style="margin-top: 16px;">

        <el-col :span="7">

          <el-input placeholder="商户名称/手机号/姓名" @keyup.enter.native="searchSeller" size="mini" v-model="keyword">
            <template slot="append">

              <el-button type="primary" @click="searchSeller()"> 搜索</el-button>
            </template>
          </el-input>

        </el-col>

        <el-col :span="6" style="margin-left: 20px;">
          <el-button plain size="mini">返回</el-button>
          <el-button type="primary" size="mini" @click="openSellerDialog" plain>添加商户信息</el-button>
        </el-col>


        <div class="download_xlxs" @click="exportTable()">下载商户信息xlxs</div>
      </div>


      <div style="position: relative; top: 20px;">
        <el-table
          ref="sellerInfoData"
          :data="sellerInfoData"
          :header-cell-style="{
            'background-color': '#fafafa',
            'color': 'rgb(35, 35, 35)',
            'border-bottom': '1px #409EFF solid'
          }"
          :row-style = "{
            'color': '#696969',
          }"
          style="width: 100%; margin-top: 10px; font-size: 13px;"
        >
          <el-table-column
            fixed
            prop="id"
            label="商家ID"
            width="60"/>


          <el-table-column
            prop="company_name"
            label="商户名称"
            width="140">


          </el-table-column>


          <el-table-column
            prop="province"
            label="省"
            width="80">


          </el-table-column>


          <el-table-column
            prop="city"
            label="市"
            width="80">

          </el-table-column>

          <el-table-column
            prop="area"
            label="区"
            width="80">

          </el-table-column>

          <el-table-column
            prop="address"
            label="详细地址"
            width="240">

          </el-table-column>

          <el-table-column
            prop="company_person"
            label="联系人1"
            width="100">


          </el-table-column>

          <el-table-column
            prop="phone2"
            label="手机1"
            width="100">


          </el-table-column>

          <el-table-column
            prop="legal_person"
            label="联系人2"
            width="100">


          </el-table-column>

          <el-table-column
            prop="phone1"
            label="联系人2"
          >


          </el-table-column>

          <el-table-column label="操作"  width="200">
            <template slot-scope="scope">

              <el-button type="text"   @click="editSellerInfo(scope.$index, scope.row)">编辑</el-button>
              <el-button type="text" style="color: #ff4d51;"  @click="delSellerInfo(scope.$index, scope.row)">删除</el-button>

            </template>
          </el-table-column>


        </el-table>

        <div class="m_pagination" style="margin-top: 10px;margin-bottom: 60px;">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10]"
            :page-size="10"
            size="mini"
            :total="sellerTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>

      </div>


      <el-dialog
        title="添加经销商信息"
        :visible.sync="sellerDialog"
        width="800px"
        :before-close="handleClose">

        <el-row>
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">商户名称：</label>

          </el-col>
          <el-col :span="18">
            <el-input
              v-model="sname"
              placeholder="请输入内容"
              style="float: left"
            >
            </el-input>
          </el-col>

        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">商户名称：</label>

          </el-col>
          <el-col :span="6">
            <el-input
              v-model="d1"
              placeholder="省"
              style="float: left"
            >
            </el-input>
          </el-col>

          <el-col :span="6">
            <el-input
              v-model="d2"
              placeholder="市"
              style="float: left"
            >
            </el-input>
          </el-col>

          <el-col :span="6">
            <el-input
              v-model="d3"
              placeholder="区"
              style="float: left"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">商家详细地址：</label>

          </el-col>
          <el-col :span="18">
            <el-input
              v-model="address"
              placeholder="请输入内容"
              style="float: left"
            >
            </el-input>
          </el-col>

        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">联系人1：</label>

          </el-col>
          <el-col :span="8">
            <el-input
              v-model="name1"
              placeholder="姓名"
              style="float: left"
            >
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="phone1"
              placeholder="手机号"
              style="float: left"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">联系人2：</label>

          </el-col>
          <el-col :span="8">
            <el-input
              v-model="name2"
              placeholder="姓名"
              style="float: left"
            >
            </el-input>
          </el-col>
          <el-col :span=8>
            <el-input
              v-model="phone2"
              placeholder="手机号"
              style="float: left"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 18px">

          <el-button size="mini" @click="handleClose()" type="" plain>取消</el-button>
          <el-button size="mini" type="primary" @click="addSeller()" plain>添加经销商</el-button>
        </el-row>

      </el-dialog>

      <el-dialog
        title="编辑经销商信息"
        :visible.sync="editSellerDialog"
        width="800px"
        :before-close="handleEditClose">

        <el-row>
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">商户名称：</label>

          </el-col>
          <el-col :span="18">
            <el-input
              v-model="sname"
              placeholder="请输入内容"
              style="float: left"
            >
            </el-input>
          </el-col>

        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">商户名称：</label>

          </el-col>
          <el-col :span="6">
            <el-input
              v-model="d1"
              placeholder="省"
              style="float: left"
            >
            </el-input>
          </el-col>

          <el-col :span="6">
            <el-input
              v-model="d2"
              placeholder="市"
              style="float: left"
            >
            </el-input>
          </el-col>

          <el-col :span="6">
            <el-input
              v-model="d3"
              placeholder="区"
              style="float: left"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">商家详细地址：</label>

          </el-col>
          <el-col :span="18">
            <el-input
              v-model="address"
              placeholder="请输入内容"
              style="float: left"
            >
            </el-input>
          </el-col>

        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">联系人1：</label>

          </el-col>
          <el-col :span="8">
            <el-input
              v-model="name1"
              placeholder="姓名"
              style="float: left"
            >
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="phone1"
              placeholder="手机号"
              style="float: left"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 8px">
          <el-col :span="4">
            <label for="" style="float: left;position: relative;top: 10px;">联系人2：</label>

          </el-col>
          <el-col :span="8">
            <el-input
              v-model="name2"
              placeholder="姓名"
              style="float: left"
            >
            </el-input>
          </el-col>
          <el-col :span=8>
            <el-input
              v-model="phone2"
              placeholder="手机号"
              style="float: left"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 18px">

          <el-button size="mini" @click="handleEditClose()" type="" plain>取消</el-button>
          <el-button size="mini" type="primary" @click="editSeller()" plain>编辑经销商</el-button>
        </el-row>

      </el-dialog>

  </div>
  </div>
</template>

<script>
  import t from './../../utils/request'
  import $ from 'jquery'
  import { parseTime } from './../../utils/index'


  export default {
    name: 'Login',
    components: {
    },
    data() {
      return {
        sellerInfoData: [],
        currentPage: 1,
        sellerTotal: 0,
        sellerDialog: false,

        keyword: '',

        sname: '',
        d1: '',
        d2: '',
        d3: '',
        address: '',
        name1: '',
        phone1: '',
        name2: '',
        phone2: '',

        editSellerDialog: false,
        currentid: 0
      }
    },
    mounted() {
      this.renderList();
    },
    created() {
      // window.addEventListener('hashchange', this.afterQRScan)
    },
    destroyed() {

    },
    methods: {

      parseTime(time) {
        return parseTime(time)
      },

      clearDate() {
        this.sname = '';
        this.d1= '';
        this.d2= '';
        this.d3= '';
        this.address= '';
        this.name1= '';
        this.phone1= '';
        this.name2= '';
        this.phone2= '';
      },

      renderList() {
        t.toPost('/admin/sellerInfo/list', {
          page: this.currentPage,
          num: 10
        }, (res) => {
          console.log(res)
          this.sellerInfoData = res.data.data
          this.sellerTotal = res.data.total
        })
      },

      handleSizeChange(val) {

      },

      handleCurrentChange(val) {
        t.toPost('/admin/sellerInfo/list', {
          page: val,
          num: 10
        }, (res) => {
          console.log(res)
          this.sellerInfoData = res.data.data
          this.sellerTotal = res.data.total
        })
      },

      addSeller() {
        t.toPost('/admin/sellerInfo/add', {
          company_name: this.sname.trim(),
          province: this.d1.trim(),
          city: this.d2.trim(),
          area: this.d3.trim(),
          address: this.address.trim(),
          company_person: this.name1.trim(),
          phone2: this.phone1.trim(),
          legal_person: this.name2.trim(),
          phone1: this.phone2.trim(),
        }, (res) => {
          if (res.code == '000000') {
            this.renderList()
            this.sellerDialog = false
            this.clearDate()
          } else {
            this.$message({
              type: 'error',
              message: '未知错误'
            });
          }
        })
      },

      delSellerInfo(index, row) {
        this.$confirm('此操作将删除这条商户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          t.toPost('/admin/sellerInfo/del', {
            sid: row.id
          }, (res) => {
              if (res.code == '000000') {
                this.renderList()
              } else {
                this.$message({
                  type: 'error',
                  message: '未知错误'
                });
              }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      editSellerInfo(index, row) {
        this.currentid = row.id
        this.editSellerDialog = true
        t.toPost('/admin/sellerInfo/get', {
          sid: row.id
        }, (res) => {
          console.log(res)

          this.sname = res.data.company_name;
          this.d1= res.data.province;
          this.d2= res.data.city;
          this.d3= res.data.area;
          this.address= res.data.address;
          this.name1= res.data.company_person;
          this.phone1= res.data.phone2;
          this.name2= res.data.legal_person;
          this.phone2= res.data.phone1;

        })
      },

      editSeller() {
        t.toPost('/admin/sellerInfo/edit', {
          sid: this.currentid,
          company_name: this.sname.trim(),
          province: this.d1.trim(),
          city: this.d2.trim(),
          area: this.d3.trim(),
          address: this.address.trim(),
          company_person: this.name1.trim(),
          phone2: this.phone1.trim(),
          legal_person: this.name2.trim(),
          phone1: this.phone2.trim(),
        }, (res) => {
          console.log(res, 999)
          if (res.code == '000000') {
            this.renderList()
            this.editSellerDialog = false
            this.clearDate()
            this.$message({
              type: 'success',
              message: '编辑成功'
            });
          } else {
            this.$message({
              type: 'error',
              message: '未知错误'
            });
          }
        })
      },

      openSellerDialog() {
        this.sellerDialog = true
      },

      handleClose() {
        this.sellerDialog = false
      },
      handleEditClose() {
        this.editSellerDialog = false
      },

      searchSeller(){
        t.toPost('/admin/sellerInfo/list', {
          page: this.currentPage,
          num: 10,
          keyword: this.keyword
        }, (res) => {
          console.log(res)
          this.sellerInfoData = res.data.data
          this.sellerTotal = res.data.total
        })
      },

      exportTable() {

        var url = 'https://market.jackgroup.cn/index.php/admin/seller/export';
        var form=$("<form>");//定义一个form表单
        form.attr("style","display:none");
        form.attr("target","");
        form.attr("method","post");//请求类型
        form.attr("action",url);//请求地址
        $("body").append(form);//将表单放置在web中

        form.submit();//表单提交
      }
    }
  }
</script>

<style scoped>
  .download_xlxs {
    float: right;
    text-align: right;
    font-size:14px;
    color: #409eff;
    margin-top:10px;
  }
  .download_xlxs:hover {
    border-bottom: 1px solid #409eff;
    cursor: pointer;
  }

  .content_main {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-color: #f1f4f5;
  }
</style>
